<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入案件名称" suffix-icon="el-icon-search" v-model="caseName"></el-input>
      <el-button class="ml-5" type="primary" @click="caseInfo">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <el-table :data="tableData" border stripe :header-cell-class-name="headerBg">
      <el-table-column prop="num" label="案号" width="250"></el-table-column>
      <el-table-column prop="caseName" label="案例名称" width="400"></el-table-column>
      <el-table-column prop="undertaker" label="承办人"></el-table-column>
      <el-table-column label="案件执行状态">
        <template slot-scope="scope">
              <p  v-if="tableData[scope.$index].status==0">待处理</p>
              <p v-if="tableData[scope.$index].status==1">办理中</p>
              <p v-if="tableData[scope.$index].status==2">已办结</p>
            </template>
      </el-table-column>
      <el-table-column label="操作"  width="200" align="center">
        <template v-slot="scope">
          <el-button type="primary" @click="process(scope.row)">审核<i class="el-icon-check"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "CaseView",
  data(){
    return {
      courtId: localStorage.getItem('courtId'),
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      caseName: "",
      status:"",
      headerBg: 'headerBg',
      form:{
        num:'',
        courtId:'',
        username:''
      }
    }
  },

  created () {
    this.caseInfo();
  },
  methods: {
    caseInfo() {
      this.request.get("/case/getCaseInfo",{
        params:{
          status: this.status,
          courtId: this.courtId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          caseName: this.caseName
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    reset (){
      this.caseName = ""
      this.caseInfo()
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.caseInfo()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.caseInfo()
    },
    process(row){
      // alert(id)
      this.form.num = row.num
      this.form.courtId = this.courtId
      this.form.username = JSON.parse(localStorage.getItem('user')).username
      this.request.get('/process/addProcessInfo',this.form).then(res =>{
        if(res.code === '200'){
          this.$message.success('已发起流程')
        }else{
           this.$message.error('未知原因')
        }
      })
      this.$router.push({path: '/home/submit', query: { id : row.id }})
    }
  },

}
</script>

<style>
.headerBg {
  background: #eee!important;
}
</style>
